<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Welcome to Lithub</title>
        <link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
        <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
        <link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
    </head>
    <body>

        <div class="circle">
            <div class="inside">
                <ul>
                    <li>
                        <img src="images/icon_2.png"/>
                    </li>
                    <li  style="cursor: pointer;" onclick="document.getElementById('PopUp').style.display = 'block' " >   
                        Login
                    </li>
                    <li  style="cursor: pointer;" onclick="document.getElementById('PopUp2').style.display = 'block' " >   
                        Register
                    </li>
                </ul>
            </div>
        </div>
        
        <div id='PopUp'>
            <form action="index.jsp" method="post">
                <p>Username: <input type='username' id="username" name="username" /></p>
                <p>Password: <input type='password' id="password" name="password" /></p>
                <input type="hidden" name="model" value="LoginPage"/>
                <input type="hidden" name="view" value="LoginPageHTML"/>
                <input type="hidden" name="action" value="login"/>
                <input type="submit" id="button">
                </br>
                <a onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.display = 'none' " >
                    <span>
                        X
                    </span>
                </a>
            </form>
        </div>

        <div id='PopUp2'>
            <form action="index.jsp" method="post">
                <p>Username:</p> <input type='username' id="username" name="username" />
                <p>Password:</p> <input type='password' id="password" name="password" />
                <p>Confirm Password:</p> <input type='password' id="password2" name="password2" />
                <p>Email:</p> <input type='text' id="email" name="email" />
                <input type="hidden" name="model" value="Register"/>
                <input type="hidden" name="view" value="RegisterPageHTML"/>
                <input type="hidden" name="action" value="register"/>
                <p><input type="submit" id="button"></p>
                <a onmouseover='this.style.cursor="pointer" '  onclick="document.getElementById('PopUp2').style.display = 'none' " >
                    <span>
                        X
                    </span>
                </a>
            </form>
        </div>


        <div class="circle2">
            <div class="inside">
                <h1>Lithub</h1>
                <p>Lithub is an incredibly powerful and convenient way to manage and keep track of all of your books and home library online. Within the sleek Lithub Dashboard, it's easy to see what your friends are reading and keeping within their own libraries, as well as see which books you have lent out or borrowed from others. Books are organized intuitively, with full descriptions and status messages of what and where they currently are. With the power of the cloud, all of your book information is accessible from both your computer web browser and your Android phone from anywhere in the world</p>
            </div>
        </div>
        
        <div class="circle3">
            <div class="inside">
                <h3>Discover</h3>
                <p>You can check to see what your friends are reading by looking at their own libraries! Read synopsis, find in-common authors, and find the books you want even while on the go with our Android app - everything you need to find the books you want to read is right here, so start discovering!</p>
            </div>
        </div>
        



    </body>
</html>
